<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>红绿灯倒计时</title>
		<style>
			@charset "utf-8";
			/*最外层*/
			
			.box {
				width: 250px;
				height: 52px;
				padding: 15px 30px;
				margin: 0 auto;
				border: 2px solid #ccc;
				border-radius: 16px;
			}
			/*3个灯的外框*/
			
			.box div {
				width: 50px;
				height: 50px;
				border-radius: 50px;
				border: 1px solid #666;
				margin-left: 5px;
				float: left;
			}
			/*数字*/
			
			.box .count {
				width: 60px;
				color: #666;
				font-size: 280%;
				line-height: 50px;
				padding-left: 6px;
				margin-left: 5px;
				border: 1px solid #fff;
				font-family: "楷体";
			}
			/*4种颜色灯:等待js中去决定使用*/
			
			.gray {
				background-color: #eee;
			}
			
			.red {
				background-color: red;
			}
			
			.yellow {
				background-color: yellow;
			}
			
			.green {
				background-color: green;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<!--红灯-->
			<div id="red"></div>
			<!--黄灯-->
			<div id="yellow"></div>
			<!--绿灯-->
			<div id="green"></div>
			<!--倒计时-->
			<div id="count" class="count"></div>
		</div>
		<script>
			/* 1、设置红黄绿灯、倒计时对象
						   2、设置绿灯亮时初始化页面
						   3、实现红绿灯倒计时*/
			var lamp={
                 //红灯相关数据
            red: {  
                obj:document.getElementById('red'),
                timeout:30,
                style:['red','gainsboro','gainsboro'],
                next:'green'
            },
                 //黄灯相关数据
            yellow:{
                obj:document.getElementById('yellow'),
               timeout:5,
               style:['gainsboro','yellow','gainsboro'],
               next:'red'
            },
                 //绿灯相关数据
            green:{
                obj:document.getElementById('green'),
                timeout:35,
                style:['gainsboro','gainsboro','green'],
                next:'yellow'
            },
            changeStyle(style){
                this.red.obj.style.background=style[0];
                this.yellow.obj.style.background=style[1];
                this.green.obj.style.background=style[2]
            }
           } ;
           var count={
            obj:document.getElementById('count'),
            change:function(num){
                this.obj.innerText=(num<10) ? ('0'+num):num;
            }
           };
           var now =lamp.green;
           var timeout=now.timeout;
           lamp.changeStyle(now.style);
           count.change(timeout);
           setInterval(function(){
            if(--timeout<=0){
                now =lamp[now.next];
                timeout=now.timeout;
                lamp.changeStyle(now.style);
            }
            count.change(timeout);
           },1000);
           
		</script>
	</body>

</html>